<script setup lang="ts">
import Homeheader from './components/Homeheader/index.vue'
import Homebody from './components/Homebody/index.vue'
import Homebottom from './components/Homebottom/index.vue'
import Dialogqueue from './components/dialog/dialogqueue.vue'
import { ref } from 'vue'
defineOptions({
  name: 'ClincHome',
})
const dialogqueue = ref(false)
const changedialogqueue = () => {
  dialogqueue.value = true
}
const dialogqueueValue = (data: boolean) => {
  dialogqueue.value = data
}
</script>

<template>
  <div id="ClincHome">
    <div class="Homeheader">
      <Homeheader></Homeheader>
    </div>
    <div class="Homebody">
      <Homebody></Homebody>
    </div>
    <div class="Homebottom">
      <Homebottom></Homebottom>
    </div>
    <div class="queue" >
      <span @click="changedialogqueue">患者列表</span>
      <Dialogqueue @getdialogqueue="dialogqueueValue" class="dialogqueue" v-show="dialogqueue" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
#ClincHome {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .queue {
    position: absolute;
    left: 0;
    top: 15%;
    font-size: 20px;
    width: 25px;
    height: 110px;
    background-color: #409eff;
    text-align: center;
    display: flex;
    align-items: center;
    .dialogqueue{
      position: absolute;
      z-index: 9999;
      left: 0;
      top: -50%;
    }
  }
  .queue:hover {
    cursor: pointer;
  }
  .Homeheader {
    width: 100%;
    height: 70px;
    
  }
  .Homebody {
    width: 100%;
    height: 30%;
  }
  .Homebottom{
    flex: 1;
    // background-color: aquamarine;
    height: calc(100% - 30% - 90px);
  }
}
</style>
